<template>

  <div class="menu">
    <div class="menu_list">
      <ul>
        <li><a href="#"><img src="/public/icons/home-smile-2-line.svg"></a></li>
        <li><a href="/user"><img src="/public/icons/user-line.svg"></a></li>
        <li><a href="#"><img src="/public/icons/function-fill.svg"></a></li>
        <li><a href="#"><img src="/public/icons/mail-line.svg"></a></li>
        <li><a href="#"><img src="/public/icons/message-2-line.svg"></a></li>
      </ul>
    </div>
  </div>




</template>





<script lang="ts">
import { gsap } from 'gsap'

export default defineComponent({
  setup() {

    const data = reactive({

    })
    
    const tween = gsap.timeline({delay: 0.5})


    onMounted(() => {
    })

    return {
      data
    }
  }
})


</script>


<style scoped>

.menu {
  position: relative;
  width: 20rem;
  height: 3rem;
  /* background-color: aquamarine; */
  text-align: start;
  text-decoration: none;
  z-index: 99;
  transition: all 0.3s;
}

.menu_list {
  border: 1px solid var(--main-text-color);
  border-radius: 50px;
  padding: 1rem 2rem;
  transition: all 0.3s;
  opacity: 0.5;
}

.menu_list:hover {
  background-color: var(--main-color);
  opacity: 0.8;
}

.menu ul{
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.menu ul li {
  list-style: none;
}

.menu img {
  height: 30px;
  filter: invert(1); 
  transition: all 0.3s;
}

.menu img:hover {
  transform: scale(1.2);
  color: var(--main-color);
}

.home_circle {
  position: absolute;
  left: 50px;
  top: 22px;
  display: block;
  width: 10px;
}






</style>